<template>
  <div>
    <div class="breadcrumb-area pt-95 pb-95 bg-img" style="background-image:url(static/picture/banner-2.jpg);">
      <div class="container">
        <div class="breadcrumb-content text-center"><h2>Shop Page</h2>
          <ul>
            <li><router-link to="/">Home</router-link>></li>
            <li class="active">Product</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="shop-area pt-100 pb-100 gray-bg">
      <div class="container">
        <div class="row flex-row-reverse">
          <div class="col-lg-9">
            <div id="separator"></div>
            <div class="grid-list-product-wrapper">
              <div class="product-view product-list">
                <div class="row" v-for="item in searchList">
                  <div class="product-width col-lg-6 col-xl-4 col-md-6 col-sm-6">
                    <div class="product-wrapper mb-10">
                      <div class="product-img">
                        <router-link :to="{name:'viewItem',query:{itemId:item.itemId,productId:item.productId,catId:item.catId}}">
                          <img :src="item.image" alt="">
                        </router-link>
                        <div class="product-action">
                          <a title="Quick View" data-toggle="modal" data-target="#exampleModal" href="#">
                            <i class="ti-plus"></i>
                          </a>
                          <a title="Add To Cart" @click="addCart(item.itemId)">
                            <i class="ti-shopping-cart"></i>
                          </a>
                        </div>
                        <div class="product-action-wishlist" @click="addWish(item.itemId)">
                          <i class="ti-heart"></i></div>
                      </div>
                      <div class="product-content"><h4>
                        <router-link :to="{name:'viewItem',query:{itemId:item.itemId,productId:item.productId,catId:item.catId}}">
                          {{item.name}}
                        </router-link>
                      </h4>
                        <div class="product-price">${{item.price}}</div>
                      </div>
                      <div class="product-list-content">
                        <h4>
                          <router-link :to="{name:'viewItem',query:{itemId:item.itemId,productId:item.productId,catId:item.catId}}">{{item.name}}</router-link>
                        </h4>
                        <div class="product-price"><span class="new">${{item.nowPrice}}</span><span class="old">${{item.oldPrice}}</span></div>
                        <p style="height:60px">{{item.descn}}</p>
                        <div class="product-list-action" style="left: 60px;position: relative;">
                          <div class="product-list-action-left">
                            <a class="addtocart-btn" title="Add to cart">
                              <i class="ion-bag" @click="addCart(item.itemId)"></i>
                              Add to cart
                            </a>
                          </div>
                          <div class="product-list-action-right" @click="addWish(item.itemId)">
                            <a title="Wishlist">
                              <i class="ti-heart"></i>
                            </a>
                            <a title="Quick View" data-toggle="modal" data-target="#exampleModal" @click="chooseItem(item.itemId)">
                              <i class="ti-plus">
                              </i>
                            </a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!--翻页-->
                <div class="pagination-style text-center mt-10">
                  <ul>
                    <li><a href="#"><i class="icon-arrow-left"></i></a></li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a class="active" href="#"><i class="icon-arrow-right"></i></a></li>
                  </ul>
                </div>
                <!--翻页-->
              </div>
            </div>
          </div>

          <div class="col-lg-3">

            <div class="shop-sidebar">
              <!--搜索框-->
              <div class="shop-widget">
                <h4 class="shop-sidebar-title">Search Products</h4>
                <div class="shop-search mt-25 mb-50">
                  <form class="shop-search-form"><input type="text" placeholder="Find a product">
                    <button type="submit"><i class="icon-magnifier"></i></button>
                  </form>
                </div>
              </div>
              <!--搜索框-->
              <!--价位选择-->
              <div class="shop-widget">
                <h4 class="shop-sidebar-title">Filter By Price</h4>
                <div class="price_filter mt-25">
                  <div id="slider-range"></div>
                  <div class="price_slider_amount">
                    <div class="label-input"><label>price :</label>
                      <input type="text" id="amount" name="price" placeholder="Add Your Price">
                    </div>
                    <button type="button">Filter</button>
                  </div>
                </div>
              </div>
              <!--价位选择-->
              <!--侧边栏-->
              <div class="shop-widget mt-50"><h4 class="shop-sidebar-title">Category</h4>
                <div class="shop-list-style mt-20">
                  <ul>
                    <li><a href="#">Birds</a></li>
                    <li><a href="#">Cats</a></li>
                    <li><a href="#">Dogs</a></li>
                    <li><a href="#">Fishes</a></li>
                    <li><a href="#">Reptiles</a></li>

                  </ul>
                </div>
              </div>
              <!--侧边栏-->
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-hidden="true">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span class="ti-close" aria-hidden="true"></span></button>
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-body">
            <div class="qwick-view-left">
              <div class="quick-view-learg-img">
                <div class="quick-view-tab-content tab-content">
                  <div class="tab-pane active show fade" id="modal1" role="tabpanel">
                    <img src="static/picture/l1.jpg" alt=""></div>
                  <div class="tab-pane fade" id="modal2" role="tabpanel">
                    <img src="static/picture/l2.jpg" alt=""></div>
                  <div class="tab-pane fade" id="modal3" role="tabpanel">
                    <img src="static/picture/l3.jpg" alt=""></div>
                </div>
              </div>
              <div class="quick-view-list nav" role="tablist">
                <a class="active" href="#modal1" data-toggle="tab" role="tab"><img src="static/picture/s1.jpg" alt=""></a>
                <a href="#modal2" data-toggle="tab" role="tab">
                  <img src="static/picture/s2.jpg" alt=""></a><a href="#modal3" data-toggle="tab" role="tab">
                <img src="static/picture/s3.jpg" alt=""></a></div>
            </div>
            <div class="qwick-view-right">
              <div class="qwick-view-content">
                <h3>{{item.name}}</h3>
                <div class="product-price"><span>${{item.price}}</span></div>
                <div class="product-rating"><i class="ion-star theme-color"></i>
                  <i class="ion-star theme-color"></i><i class="ion-star theme-color"></i>
                  <i class="ion-star theme-color"></i><i class="ion-star theme-color"></i>
                </div>
                <p>{{item.descn}}</p>
                <div class="quickview-plus-minus">
                  <div class="cart-plus-minus">
                    <input type="text" value="2" name="qtybutton" class="cart-plus-minus-box"></div>
                  <div class="quickview-btn-cart">
                    <span class="btn-style" data-dismiss="modal" aria-label="Close" @click="addCart(item.itemId)">add to cart</span>
                  </div>
                  <div class="quickview-btn-wishlist" @click="addWish(item.itemId)">
                    <a class="btn-hover">
                      <i class="ti-heart" ></i>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import viewSearch from "../../../static/js/pet/viewSearch";
export default {
  ...viewSearch
}
</script>

<style scoped>
@import "../../../static/css/bootstrap.min.css";
@import "../../../static/css/animate.css";
@import "../../../static/css/simple-line-icons.css";
@import "../../../static/css/themify-icons.css";
@import "../../../static/css/owl.carousel.min.css";
@import "../../../static/css/slick.css";
@import "../../../static/css/meanmenu.min.css";
@import "../../../static/css/style2.css";
@import "../../../static/css/responsive.css";
</style>
